<div class="hot_goods">
<h3>{$title}</h3>
<ul>
	<volist name="products" id="d">
	<li>
		<a class="popular-product-item" href="{:U('/goods/'.$d['goods_id'])}">
			<img src="__ROOT__/{$d.image}" title="{$d.name}" alt="{$d.name}">
			<span class="popular-product-item_title font-additional font-weight-bold text-uppercase">{$d.name}</span>
			<span class="popular-product-item_price font-additional color-third">￥{$d.price}</span>
		</a>
	</li>
	</volist>
</ul>
</div>
<style>

.hot_goods ul{
	float: left;
    padding: 25px 0;
    width: 100%;
}
.hot_goods li {
    float: left;
    margin-bottom: 20px;
    width: 100%;
}
.popular-product-item {
    border-bottom: 1px solid #ececec;
    display: block;
    min-height: 93px;
    padding: 5px 0 0 97px;
    position: relative;
    width: 100%;
}
.popular-product-item img {
    left: 0;
    position: absolute;
    top: 0;
}
.popular-product-item_title {
    color: #333;
    display: block;
    float: left;
    font-size: 12px;
    line-height: 100%;
    padding-bottom: 10px;
    text-decoration: none;
    width: 100%;
}
.font-weight-bold {
    font-weight: 700;
}
.font-additional {
    font-family: "Montserrat",sans-serif;
}
.popular-product-item_price {
    font-size: 13px;
    line-height: 100%;
    text-decoration: none;
    color:#e94d38;
}
.popular-product-item:focus, .popular-product-item:hover {
    text-decoration: none;
}
</style>